<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #panel{
            margin: 50px auto;
            border: 1px solid red;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <my-slot>
        <img src="1.jpg" alt="">
        <img src="1.jpg" alt="">
        <img src="1.jpg" alt="">
        <img src="1.jpg" alt="">
        <h2>sdvknj;ldfknvm</h2>
    </my-slot>
</div>

<!--模板-->
<template id="my_slot">
    <div id="panel">
        <h2 class="panel-head">插槽的头部</h2>
        <!--预留插槽-->
        <slot>可以替换任何标签，默认显示提示内容</slot>
        <footer>插槽的尾部</footer>
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    /*regist*/
    Vue.component('my-slot',{
        template:'#my_slot'
    });
    
    new Vue({
        el:"#app",
//        data:"宇宙无敌小可爱"
    });
    
</script>
</body>
</html>